<template>
  <div class="auth-container">
    <filters :filter-form="filterForm" @getForm="getForm" />
    <div class="mytable">
      <mytable
        :table-cols="tableCols"
        :table-data="tableData"
        :show-index="true"
        @getOptions="getOptions"
      >
        <template #identify="{data}">
          <span>{{ userMap[data.identify] }}</span>
        </template>
        <template #status="{data}">
          <span :style="{color: userStatusMap[data.status].color}">{{ userStatusMap[data.status].name }}</span>
        </template>
        <template #headIcon="{data}">
          <el-avatar :size="30" :src="data.headIcon">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png">
          </el-avatar>
        </template>
      </mytable>
    </div>
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="pageChage"
      />
    </div>
  </div>
</template>

<script>
import filters from '@/components/filter/index'
import mytable from '@/components/mytable/index'
import { userMap, userStatusMap } from '@/utils/dictionary'

export default {
  components: {
    filters,
    mytable
  },
  data() {
    return {
      userMap, // 用户身份字典
      userStatusMap, // 用户状态字典
      filterForm: [
        {
          type: 'text',
          title: '昵称',
          placeholder: '请输入昵称',
          key: 'nickname'
        },
        {
          type: 'text',
          title: '用户名',
          key: 'username'
        }
      ],
      tableCols: [
        {
          label: '头像',
          prop: 'headIcon',
          expand: true
        },
        {
          label: '账号',
          prop: 'username'
        },
        {
          label: '昵称',
          prop: 'nickname'
        },
        {
          label: '手机号码',
          prop: 'phone'
        },
        {
          label: '邮箱',
          prop: 'email'
        },
        {
          label: '用户身份',
          prop: 'identify',
          expand: true
        },
        {
          label: '状态',
          prop: 'status',
          expand: true
        },
        {
          label: '操作',
          slot: true,
          options: [
            {
              label: '编辑',
              key: 'edit'
            },
            {
              label: '删除',
              key: 'delete'
            }
          ]
        }
      ],
      tableData: [],
      total: 0
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    async getUserList(params) {
      const res = await this.$api.getUserList(params)
      if (res && res.code === 200) {
        this.tableData = res.data.records
      }
    },
    getOptions(row, key) {
      if (key === 'delete') {
        this.deleteUser(row)
      }
    },
    async deleteUser(row) {
      const res = await this.$api.deleteUser(row.id)
      if (res && res.code === 200) {
        if (res.data.busiCode === '1') {
          this.$message.success(res.data.msg)
        } else {
          this.$message.error(res.data.msg)
        }
      }
    },
    getForm(form) {
      this.getUserList(form)
    },
    pageChage(page) {
      const postData = {
        pageNo: page,
        ...this.form
      }
      this.getUserList(postData)
    },
    handleEdit() {}
  }
}
</script>

<style lang="scss" scoped>
.mytable{
  margin: 0 80px;
}
.page{
  padding: 20px 0;
  text-align: center;
}
</style>
